<template>
  <div>
		<r-table
			:isHandle="true"
			:isBorder="true"
			:tableData="tableData"
			:tableCols="tableCols"
			:tableHandles="tableHandles"
			:treeProps="{children: 'children', hasChildren: 'hasParent'}"/>
			
			<r-form
			  :isHandle="true"
			  :formRules="formRules"
			  :formCols="formCols"
			  :formHandle="formHandle"
			  :formData="formData"
				labelWidth="100px"
			  dialogWidth="550px"
				:destroy="false"
			  :inline="false"
			  ref="elForm"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
			tableData: [],
			tableCols: [
				{ label: "菜单名称", prop: "text",align:'left' },
				{ label: "上级目录", prop: "parentLabel",align:'left',width:400},
				{ label: "排序", prop: "orderNum",align:'left',width:200},
				{label: "操作",type: "button",width: 200,btnList: [
					{type: "primary",size: "mini",label: "编辑",handle: row => this.elFormDetail(row)},
					{type: "danger",size: "mini",label: "删除",handle: row => this.TableDel('/sysMenu/remove',{id:row.id})},
				]}
			],
			tableHandles: [
				{
					label: "添加菜单",
					type: "primary",
					handle: (that) => this.elFormVisible() ,
				},
			],
			formData: {
			  menuName: "",
				menuLable:'目录',
				parentId:0,
				orderNum:0,
				type:0,
				path:''
			},
			formCols: [
				//{ type: "radio", label: "类型", width: 350, prop: "type",radios:[{label:'菜单',value:1},{label:'按钮',value:2}] },
			  { type: "input", label: "菜单名称", width: 350, prop: "menuName" },
				{ type:'popover', label: "上级目录", prop: "menuLable",width: 350,options:[],handleNodeClick:e=>this.nodeClick(e) },
				{ type:'number', label: "排序", prop: "orderNum",width: 200,  },
				{ type: "input", label: "路由", width: 350, prop: "path" },
			],
			formRules: {
			  menuName: [
			    { required: true, message: "请输入角色名称", trigger: "blur" },
			  ],
				menuLable: [
			    { required: true, message: "请选择上级目录", trigger: "change" },
			  ],
			},
			formHandle: [
			  {
			    label: "确认",
			    type: "primary",
			    icon: "el-icon-circle-plus-outline",
			    handle: e => this.elFormSubmit(),
			  },
			  {
			    label: "取消",
			    icon: "el-icon-circle-close",
			    handle: e => this.elFormVisible(),
			  },
			],
			
			// data: [
			//   {
			//     id: 1,
			//     label: "基础资料",
			//     children: [
			//       {
			//         id: 3,
			//         label: "我的客户",
			//       },
			//     ],
			//   },
			//   {
			//     id: 2,
			//     label: "仓库管理",
			//     children: [
			//       {
			//         id: 4,
			//         label: "采购收货",
			//       },
			//       {
			//         id: 6,
			//         label: "其它出库",
			//       },
			//     ],
			//   },
			// ],
			
    };
  },
  created() {},
  mounted() {
		
		this.init()
	},
  methods: {
		init(){
			this.$http.get("/sysMenu/getListAll").then(({ data }) => {
			  this.tableData = data;
				data.forEach(item=>{
					item.orderNum = item.attributes.orderNum
					 item.children.forEach(i=>{
						 delete i.children
						 i.parentLabel = item.text
						 i.orderNum = i.attributes.orderNum
					 })
				})
				this.formCols[this.labIndex(this.formCols,'上级目录')].options = data
			});
		},
		nodeClick(data){
			this.formData.menuLable = data.text
			this.formData.parentId = data.id
		},
		elFormDetail(row) {
		  Object.keys(this.formData).forEach((key) => {
		    this.formData[key] = row[key];
		  });
		  this.formData.id = row.id;
			this.formData.menuName = row.text
			this.formData.path = row.attributes.url
			let menuLable = ''
			if(row.parentId!=0){
				let arr =  this.formCols[this.labIndex(this.formCols,'上级目录')].options
				let idx = arr.map(item => item.id).indexOf(row.parentId)
				menuLable = arr[idx].text
			}else{
				menuLable = '目录'
			}
			this.formData.menuLable = menuLable
		  this.elFormVisible();
		},
		elFormSubmit() {
		  this.$refs.elForm.$refs.ruleForm.validate((valid) => {
		    if (valid) {
		      let api = this.formData.id?'/sysMenu/update':'/sysMenu/add'
		      this.$http.post(api,this.formData).then(res=>{
						if(res && res.code==200){
							this.$message({
								type: 'success',
								message: this.formData.id ? "编辑成功!" : "添加成功!",
								duration:1300,
								onClose:res=>{
									this.elFormVisible()
									this.init()
								}
							});
						}
		      	
		      })
		    }
		  });
		},
	},
};
</script>

<style scoped lang="scss">
</style>
